<template>
  <div class="modal-content">
    <el-form :model="form">
      <table class="table-container">
        <tbody>
          <tr>
            <td class="td-label-2">
              <must/>关键字</td>
            <td width="300">
              <el-input :readonly="readOnly" v-model="form.id" v-validate="'required|max:30'" name="关键字" placeholder="请输入关键字" />
              <span v-show="errors.has('关键字')" style="color: red;">{{ errors.first('关键字') }}</span>
            </td>
            <td class="td-label-2">
              <must/>名称</td>
            <td>
              <el-input v-model="form.name" v-validate="'required|max:60'" name="名称" placeholder="请输入名称"></el-input>
              <span v-show="errors.has('名称')" style="color: red;">{{ errors.first('名称') }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>
    <div slot="footer" align="center" style="margin: 5px;">
      <el-button :disabled="btnDisabled" @click="handleSave" type="warning" size="small">{{ btnNm }}</el-button>
    </div>
  </div>
</template>

<script>
  import {
    addObj,
    putObj,
  } from '@/api/common';

  /* 工具 */
  import * as common from '@/utils/base/common';
  
  export default {
    /* 数据字典主表 - 添加 修改页面  */
    name: 'dict-add',
    data() {
      return {
        restPath: 'sys/dict',
        btnDisabled: true, //按钮禁用状态
        readOnly: false, // 是否只读
        btnNm: '保 存',
        titles: {
          create: '添加',
          update: '修改',
        },
        create: 'create',
        update: 'update',
        form: {
          id: '',
          name: '',
        },
      }
    },
    methods: {
      initData(formData, btnType) {
        this.form = formData
        this.btnType = btnType
        // 修改页面
        if(this.btnType == this.create) {
          this.btnDisabled = false
          this.readOnly = false
          this.btnNm = '保 存'
        }
        else if(this.btnType == this.update) {
          this.btnDisabled = false
          this.readOnly = true
          this.btnNm = '修 改'
        }
        else {
          this.btnDisabled = true
          this.readOnly = false
          this.btnNm = '保 存'
        }
      },

      /**
       * 点击保存按钮
       */
      handleSave() {
        this.$validator.validateAll().then((result) => {
          if(result) {
            // 按钮禁用
            this.btnDisabled = true 
            
            // 修改页面
            if(this.btnType === this.update) {
              this.updateSave()
            }
            // 添加页面
            else {
              this.addSave()
            }
          } else {
            // 提示信息，并且防止连续多次请求
            common.tips(this, '有验证信息没有通过，请查看页面信息是否填写完整或正确！')
          }
        })
      },
      
      updateSave(){
        putObj(this.restPath, this.form).then(response => {
          this.btnDisabled = false // 解除按钮禁用状态
          common.message(this, 'success', 2, '保存成功!')
        }).catch(err => {
          this.btnDisabled = false // 解除按钮禁用状态
          // 防止连续多次请求
          this.avoidMultRequest(this)
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },
      
      addSave(){
        addObj(this.restPath, this.form).then(response => {
          this.btnDisabled = false // 解除按钮禁用状态
          common.message(this, 'success', 2, '保存成功!')
          this.readOnly = true
          // 向父组件发送刷新事件
          this.$emit('flushPage') 
        }).catch(err => {
          this.btnDisabled = false // 解除按钮禁用状态
          // 防止连续多次请求
          this.avoidMultRequest(this)
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      avoidMultRequest(that_) {
        // 按钮禁用
        that_.btnDisabled = true
        // 三秒后在解除按钮禁用状态
        setTimeout(function() {
          // 解除按钮禁用状态
          that_.btnDisabled = false
        }, 2000);
      },

    } // methods end
  }
</script>

<style scoped>
  @import "~@/styles/form.css";
</style>